<form id="AutoAgreeQuotaAdd" action="<?= blang_url('users/member/AutoAgreeQuotaAdd') ?>" method="post">
	<table>
		<tbody>
			<tr>
				<td width="15%">客户名称:</td>
				<td width="45%">
					<select name="customer_id" v-model="customer_id" :style="{width:'80%'}" data-edit-select="1">
	                    <option value="">--客户--</option>
	                    <option v-for="item in customers" v-bind:value="item.id">{{item.name_ch}}</option>
	                </select>
				</td>
				<td width="10%"></td>
				<td width="30%"></td>
			</tr>
			<tr>
				<td>产品类型:</td>
				<td>
					<textarea cols="30" rows="10" id="product_category_txt" disabled placeholder="点击右边'+'号按钮,添加产品类型" :style="{width:'100%'}">
						
					</textarea>
				</td>
				<td>
					<input type="hidden" name="product_category_ids"  v-model="product_category_ids">
					<button type="button" v-on:click="setProductCats">+</button>
				</td>
				<td>
					额度:
					<input type="text" min="0.01" max="9999.99" step="0.01" name="amount" v-model="amount" :style="{width:'60px'}">USD
				</td>
			</tr>
		</tbody>
	</table>
</form>

<style type="text/css">
.clearfix:before,
.clearfix:after{
	content:" ";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{*zoom:1;_zoom:1;}
.w-per-8{
	width:15%;
	float:left;
	height:20px;
	padding-left: 2%;
	margin:10px 0;
	overflow-y: visible;
}

#AutoAgreeQuotaAdd td{
	padding: 10px;
	vertical-align: top;
}
.select2-container--open{
	z-index: 999999999;
}
</style>


<script type="text/javascript">
~function(){
	var customers = <?= json_encode($customers) ?>;
	var AutoAgreeQuotaAdd = new Vue({
	    el:'#AutoAgreeQuotaAdd',
	    data:{
	        customers:customers,
	        customer_id:'',
	        amount:0.00,
	        product_category_ids:''
	    },
	    methods:{
	    	setProductCats:setProductCats
	    }
	});

	function setProductCats(e){
		var url = '<?= blang_url('users/member/AutoAgreeQuotaPCats/') ?>';
		var pcats;
		$.ajax({
			url:url,
			async:false,
			type:'post',
			data:{
				customer_id:AutoAgreeQuotaAdd.customer_id
			},
			success:function(response){
				if (!response.success) {
					layer.msg(response.message);
					pcats = false;
				}else{
					pcats = response.data;
				}
			}
		});
		if(pcats === false)return false;
		var idsArr = AutoAgreeQuotaAdd.product_category_ids.split(',') || [];
		var tpl = '<div class="clearfix"><label class="w-per-8"><input type="checkbox" class="J-check-all" data-target="input[name=\'pcats\']">全选</label></div>';
		tpl += '<div class="clearfix">';
		for(var i in pcats){
			var attr = $.inArray(pcats[i].id, idsArr) >= 0 ? 'checked' : '';
			tpl += '<label class="w-per-8"><input type="checkbox" name="pcats" value="'+pcats[i].id+'" '+attr+'>'+pcats[i].name_ch+'</label>'
		}
		tpl += '</div>';

        var index = layer.open({
            title:'选择产品',
            type: 1,
            closeBtn:false,
            btn:['确认','取消'],
            area: ['850px', '500px'],
            content: tpl,
            yes:function(){
            	var ids = '',
            	    text = '';
            	$('input[name="pcats"]').each(function(index){
            		if($(this).prop('checked')){
            			ids += this.value + ',';
            			text += this.parentNode.innerText + '; ';
            		}
            	});
            	AutoAgreeQuotaAdd.product_category_ids = ids;
            	$('#product_category_txt').val(text);
            	layer.close(index);
            },
            btn2:function(){
            	layer.close(index);
            }
        });
	}
	$(document).on('change','.J-check-all',function(){
		var $boxs = $($(this).data('target'));
		$boxs.prop('checked', $(this).prop('checked'));
	});
	$('#AutoAgreeQuotaAdd').submit(function(){
		if(AutoAgreeQuotaAdd.customer_id < 1){
			layer.msg('请选择电商客户');
			return false;
		}
		if(AutoAgreeQuotaAdd.amount < 0.01 || AutoAgreeQuotaAdd.amount > 9999){
			layer.msg('请设置正确的额度');
			return false;
		}
		if(AutoAgreeQuotaAdd.product_category_ids == ''){
			layer.msg('请选择产品类型');
			return false;
		}
		return true;
    });

	$('#AutoAgreeQuotaAdd select[name="customer_id"]').on('select',function(e){
		AutoAgreeQuotaAdd.customer_id = e.target.value;
	});
}();

$(function(){
    $("select[data-edit-select]").filterSelect();
});
</script>